<script setup>
import { userStorage } from '@/api/UserApi'
import router from '@/router'
import { useRoute } from 'vue-router'
import { onMounted, ref, watch, computed } from 'vue'

const route = useRoute()

watch(() => route.path, (newPath) => {
  mode.value = 1
})

//djsahduiasgduawawduad
const mode = ref(1)
const leftBar = ref()
const topBarContent = ref({
  '/file' : [{
    mode: 1,
    name: '我的文件'
  },{
    mode: 2,
    name: '共享文件'
  },{
    mode: 3,
    name: '错题分析'
  },{
    mode: 4,
    name: '回收站'
  }],
  '/plan': [{
    mode: 1,
    name: '清单'
  },{
    mode: 2,
    name: '视图'
  },{
    mode: 3,
    name: '智能分析'
  }],
  '/community': [
    {
      mode: 1,
      name: '搜索发现'
    },
    {
      mode: 2,
      name: "发布文章"
    },
    {
      mode: 3,
      name: '我的文章'
    }
  ],
  "/user/:id": [{
    mode: 1,
    name: 'ta的文件'
  },{
    mode: 2,
    name: 'ta的帖子'
  }]
})

const currentMenu = computed(() => {
  const path = router.currentRoute.value.path
  if (/^\/user\/\d+/.test(path)) {
    return topBarContent.value["/user/:id"]
  }
  return topBarContent.value[path] || []
})

const onTopSelect = (index) => {
  mode.value = Number(index)
}

const onLeftSelect = (index) => {
  mode.value = 1
  router.push(index)
}

const memory = ref({ usedSize: 0, totalSize: 0 })
onMounted(async () => {
  memory.value = (await userStorage()).data.data
})

</script>

<template>
  <div class="container">
    <div class="top-bar">
      <div class="title">ctrl+learn</div>

      <el-menu default-active="1" mode="horizontal" @select="onTopSelect" class="top-menu-wrapper" v-model="mode">
        <el-menu-item :index="item.mode" v-for="item in currentMenu" :key="item.mode">
          <div>{{ item.name }}</div>
        </el-menu-item>
      </el-menu>

      <div class="memory" v-if="router.currentRoute.value.path === '/file'">
        <div class="remain">{{ memory.usedSize.toFixed(2) }}MB/{{ memory.totalSize.toFixed(2) }}MB</div>
        <el-progress type="line" :show-text="false" color="#a07751" :percentage="memory.usedSize / memory.totalSize * 100"></el-progress>
      </div>

    </div>
    <div class="side-bar">
      <el-menu mode="vertical" :default-active="router.currentRoute.value.path" @select="onLeftSelect" class="left-menu-wrapper">
        <el-menu-item index="/community" key="/community">
          <div class="title">学习社区</div>
        </el-menu-item>
        <el-menu-item index="/plan" key="/plan">
          <div class="title">学习计划</div>
        </el-menu-item>
        <el-menu-item index="/file" key="/file">
          <div class="title">文件管理</div>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content-wrapper">
      <router-view v-slot="{ Component }" :key="$route.fullPath">
        <component :is="Component" :mode="mode"></component>
      </router-view>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: relative;
  width: 2000px;
  height: 1000px;
  margin: 0 auto;
}

.container .side-bar .left-menu-wrapper {
  position: absolute;
  top: 68px;
  width: 162px;
  height: 932px;
}

:deep(.side-bar .left-menu-wrapper) {
  background-color: #e0b679;
  color: #9f632c;
}

:deep(.side-bar .left-menu-wrapper .el-menu-item) {
  color: #9f632c;
}

:deep(.side-bar .left-menu-wrapper .el-menu-item.is-active) {
  background-color: #9f632c;
  color: #fbe7bd;
}

:deep(.side-bar .left-menu-wrapper .el-menu-item:hover) {
  background-color: #d3a45a !important;
  color: #fbe7bd !important;
}

.container .content-wrapper {
  position: absolute;
  top: 68px;
  left: 162px;
  width: 1838px;
  height: 932px;
}

.top-bar {
  position: absolute;
  height: 68px;
  width: 2000px;
  background-color: #b68951;
}

.top-bar .title {
  position: absolute;
  top: 15px;
  left: 24px;
  width: 212px;
  height: 30px;
  font-family: SimSun;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #fbe7bd;
}

.container .top-bar .top-menu-wrapper {
  position: absolute;
  left: 377px;
  width: 1146px;
  height: 68px;
}

:deep(.top-bar .top-menu-wrapper) {
  background-color: #b68951;
  color: #d5b484;
  font-size: 30px;
}

:deep(.top-bar .top-menu-wrapper .el-menu-item) {
  width: 216px;
  color: #d5b484;
}

:deep(.top-bar .top-menu-wrapper .el-menu-item.is-active) {
  background-color: #b68951 !important;
  color: #eed5a9 !important;
  border-bottom: #eed5a9 2px solid;
}

:deep(.top-bar .top-menu-wrapper .el-menu-item:hover) {
  background-color: #d3a45a !important;
  color: #eed5a9 !important;
}

.container .top-bar .memory {
  width: 331px;
  height: 36px;
  position: absolute;
  left: 1615px;
  top: 16px;
}

.container .top-bar .memory .remain{
  width: 43px;
	height: 19px;
	font-family: SimSun;
	font-size: 21px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #e7cea0;
}

:deep(.el-progress__track) {
  background-color: #e7cea0 !important;
}

.el-progress {
  top: 7px;
}

</style>
